<template>
    <!-- 版本履历 -->
    <a-modal :footer="null" :title="headerTitle" :visible.sync="dialogVisible" @cancel="handleCancel" width="1200px">
        <!-- 表格 -->
        <s-table
            ref="table"
            :scroll="{ y: 300 }"
            size="default"
            rowKey="id"
            :columns="columns"
            :data="loadData"
            :showPagination="false"
        >
            <!-- 表格操作栏 -->
            <span slot="actions" slot-scope="text, record">
                <template>
                    <a @click="handleManage(record)">查看详情</a>
                </template>
            </span>
        </s-table>
        <!-- 页脚操作栏 -->
        <div slot="footer" class="btn_box">
            <a-button type="primary" @click="handleCancel">关闭</a-button>
        </div>
    </a-modal>
</template>

<script>
import { STable } from '@/components' // 表格
export default {
    name:'a'+Date.now(),
    components: {
        STable,
    },
    props: {
        // 显隐控件
        visible: {
            type: Boolean,
            default() {
                return false
            },
        },
        versionData: {
            type: Array,
            default() {
                return []
            },
        },
        // 标题
        headerTitle: {
            type: String,
            default() {
                return '历史版本信息'
            },
        },

        // 查看详情路径
        pathName: {
            type: String,
            default: () => 'UpdateProjectControl',
        },
        // 表头
        columns: {
            type: Array,
            default: () => [
                {
                    title: '版本号',
                    dataIndex: 'businessVersion',
                    customRender(e) {
                        return e ? 'V' + e : ''
                    },
                },
                {
                    title: '上传时间',
                    dataIndex: 'createTime',
                },
                {
                    title: '操作',
                    dataIndex: 'actions',
                    width: '100px',
                    scopedSlots: { customRender: 'actions' },
                },
            ],
        },
    },
    watch: {
        visible(e) {
            if (e) {
                this.$nextTick(() => {
                    this.$refs.table.refresh(true)
                })
            }
        },
    },
    mounted() {
        this.loadData = () => {
            return new Promise((resolve, reject) => {
                resolve({
                    data: this.versionData,
                })
            })
        }
    },
    computed: {
        // 与父组件绑定visible
        dialogVisible: {
            get: function () {
                return this.visible
            },
            set: function (e) {
                this.$emit('update:visible', e)
            },
        },
    },
    data() {
        return {
            loadData: () => {},
        }
    },
    methods: {
        /**
         * 操作栏
         */
        handleManage(record) {
            let query = {
                pageType: 'look',
                id: record.id || '',
            }
            if (record && record.id) {
                // query.historyId = record.id
                query.id = record.id
            }
            this.$router.push({
                name: this.pathName,
                query,
            })
        },
        /**
         * 关闭弹窗
         */
        handleCancel() {
            this.dialogVisible = false
        },
    },
}
</script>
